<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="ColorVS" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    uniform float u_PointSize;
    uniform mat4 u_ModelM4;
    uniform mat4 u_PvM4;
    void main(){
        gl_Position = u_PvM4 * u_ModelM4 * a_Position;
        gl_PointSize = u_PointSize;
    }
</script>
<script id="ColorFS" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 u_Color;
    void main(){
        gl_FragColor = u_Color;
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, OrthographicCamera, PerspectiveCamera, Spherical } from '../js/three.module.js';



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const ctx = canvas.getContext("2d");

    //头尾
    ctx.lineCap = 'round';
    // ctx.lineCap = 'square';

    //中间的点
    ctx.lineJoin = 'round';
    //ctx.lineJoin = 'bevel';
    //ctx.lineJoin = 'miter';
    //ctx.miterLimit = 2;
    ctx.setLineDash([30, 60, 90]);

    ctx.lineWidth = 100;
    ctx.moveTo(400, 50);
    ctx.lineTo(100, 400);
    ctx.lineTo(400, 400);
    ctx.stroke();

    ctx.lineWidth = 3;
    ctx.strokeStyle = 'red';
    ctx.moveTo(400, 50);
    ctx.lineTo(100, 400);
    ctx.lineTo(400, 400);
    ctx.stroke();
</script>

</html>